<template>
  <div class="search-container" @keyup.enter="getRecordList">
    <div class="title">历史监控记录</div>

    <el-form :inline="true" size="large">
      <el-space :size="20">
        <el-select v-model="searchPipelineId" placeholder="管线" class="pipeline-select">
          <el-option-group v-for="item in pipelineS" :key="item.id" :label="item.name">
            <el-option
              v-for="pipeline in item.pipelines"
              :key="pipeline.id"
              :label="pipeline.name"
              :value="pipeline.id"
            />
          </el-option-group>
          <template #prefix>
            <el-icon><Filter /></el-icon>管线
          </template>
        </el-select>
        <el-date-picker
          v-model="rangeRecordTime"
          type="datetimerange"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="YYYY-MM-DD HH:mm:ss"
          :default-time="defaultTime"
          :shortcuts="shortcuts"
          @change="getRecordList()"
        />
        <el-button type="primary" :icon="Search" @click="getRecordList"> 搜索 </el-button>
        <el-button type="primary" :loading="exportExcelLoading" @click="exportExcel">
          <template #icon>
            <svg-icon icon-name="icon-daochuExcel"></svg-icon>
          </template>
          <template #default> 导出Excel </template>
        </el-button>
      </el-space>
    </el-form>
  </div>
</template>
<script setup name="RecordSearchCom">
import { Search, Filter } from '@element-plus/icons-vue'
import { useRecord } from '../hooks/useRecord'
import { usePipeline } from '../hooks/usePipeline'
const { rangeRecordTime, exportExcelLoading, getRecordList, exportExcel } = useRecord()
const { pipelineS, searchPipelineId } = usePipeline()
/* 默认时间 00:00:00 - 23:59:59 */
const defaultTime = [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]
const shortcuts = [
  {
    text: '半小时内',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMinutes(start.getMinutes() - 30)
      return [start, end]
    }
  },
  {
    text: '一小时内',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setHours(start.getHours() - 1)
      return [start, end]
    }
  },
  {
    text: '一天内',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - 1)
      start.setHours(0)
      start.setMinutes(0)
      start.setSeconds(0)
      return [start, end]
    }
  },
  {
    text: '两天内',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - 2)
      start.setHours(0)
      start.setMinutes(0)
      start.setSeconds(0)
      return [start, end]
    }
  },
  {
    text: '七天内',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - 7)
      start.setHours(0)
      start.setMinutes(0)
      start.setSeconds(0)
      return [start, end]
    }
  }
]
</script>
<style lang="less" scoped>
.search-container {
  --padding: 20px;
  position: relative;
  padding: var(--padding);
  display: flex;
  justify-content: center;
  align-items: center;
  .pipeline-select {
    width: 240px;
  }
  .title {
    position: absolute;
    left: var(--padding);
    top: var(--padding);
    color: #303133;
    font-size: 16px;
    font-weight: bold;
  }
}
</style>
